<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../lib/@eonasdan/tempus-dominus/dist/css/tempus-dominus.css"/>
  <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
  <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <div class="card border-0 shadow-sm">
    <div class="card-body">
      <h5 class="card-title">年份选择</h5>
      <div class="input-group mb-3" id="datetimepicker1">
        <input type="text" class="form-control" readonly aria-label="">
        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
      </div>


      <h5 class="card-title">年月选择</h5>
      <div class="input-group mb-3" id="datetimepicker2">
        <input type="text" class="form-control" readonly aria-label="">
        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
      </div>

      <h5 class="card-title">年月日选择</h5>
      <div class="input-group mb-3" id="datetimepicker3">
        <input type="text" class="form-control" readonly aria-label="">
        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
      </div>

      <h5 class="card-title">年月日时分秒选择</h5>
      <div class="input-group mb-3" id="datetimepicker4">
        <input type="text" class="form-control" readonly aria-label="">
        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
      </div>

      <h5 class="card-title">时刻选择</h5>
      <div class="input-group mb-3" id="datetimepicker5">
        <input type="text" class="form-control" readonly aria-label="">
        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
      </div>


      <h5 class="card-title">区间选择</h5>

      <div class="row">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="开始时间" name="begintime"
                 aria-label="begintime" id="datetimepicker6">
          <span class="input-group-text"><i class="bi bi-arrow-left-right"></i></span>
          <input type="text" class="form-control" placeholder="结束时间" name="endtime" aria-label="endtime"
                 id="datetimepicker7">
        </div>

      </div>


    </div>
  </div>
</div>
<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->


<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<!--/插件放置区域-->
<script src="../lib/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../lib/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>
  $(document).ready(function () {
    //日期时间的翻译，由于该插件没有内置中文翻译，需要手动通过选项进行翻译
    let td_zh = {
      today: '回到今天',
      clear: '清除选择',
      close: '关闭选取器',
      selectMonth: '选择月份',
      previousMonth: '上个月',
      nextMonth: '下个月',
      selectYear: '选择年份',
      previousYear: '上一年',
      nextYear: '下一年',
      selectDecade: '选择十年',
      previousDecade: '上一个十年',
      nextDecade: '下一个十年',
      previousCentury: '上一个世纪',
      nextCentury: '下一个世纪',
      pickHour: '选取时间',
      incrementHour: '增量小时',
      decrementHour: '递减小时',
      pickMinute: '选取分钟',
      incrementMinute: '增量分钟',
      decrementMinute: '递减分钟',
      pickSecond: '选取秒',
      incrementSecond: '增量秒',
      decrementSecond: '递减秒',
      toggleMeridiem: '切换上下午',
      selectTime: '选择时间',
      selectDate: '选择日期',
    }

    //年份选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'years',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: false,
          //支持日期选择
          date: false,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: false,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: false
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    //年月选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy-MM',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'years',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: true,
          //支持日期选择
          date: false,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: false,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: false
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    //年月日
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy-MM-dd',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'years',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: true,
          //支持日期选择
          date: true,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: false,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: false
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    //年月日时分秒
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy-MM-dd HH:mm:ss',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'calendar',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: true,
          //支持日期选择
          date: true,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: true,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: true
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    //时刻选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'HH:mm',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'clock',
        components: {
          decades: false,
          //是否开启日历，false:则是时刻模式
          calendar: false,
          //支持年份选择
          year: false,
          //是否开启月份选择
          month: false,
          //支持日期选择
          date: false,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: true,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: false
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
      }
    });

    let td6 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker6'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy-MM-dd HH:mm:ss',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'calendar',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: true,
          //支持日期选择
          date: true,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: true,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: true
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    let td7 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker7'), {
      //本地化控制
      localization: {
        ...td_zh,
        format: 'yyyy-MM-dd HH:mm:ss',
        //是否使用24小时制,比如3.15分会变成15.15
        // hourCycle: 'h24'
      },
      //布局控制
      display: {
        //视图模式(选择年份视图最先开始)
        viewMode: 'calendar',
        components: {
          //是否开启日历，false:则是时刻模式
          calendar: true,
          //支持年份选择
          year: true,
          //是否开启月份选择
          month: true,
          //支持日期选择
          date: true,
          //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
          clock: true,
          //时
          hours: true,
          //分
          minutes: true,
          //秒
          seconds: true
        },
        //图标
        icons: {
          time: 'bi bi-clock',
          date: 'bi bi-calendar',
          up: 'bi bi-arrow-up',
          down: 'bi bi-arrow-down',
          previous: 'bi bi-chevron-left',
          next: 'bi bi-chevron-right',
          today: 'bi bi-calendar-check',
          clear: 'bi bi-trash',
          close: 'bi bi-x',
        },
        //视图底部按钮
        buttons: {
          today: true,
          clear: true,
          close: true,
        },
      }
    });

    td6.subscribe(tempusDominus.Namespace.events.change, (e) => {
      td7.updateOptions({
        restrictions: {
          minDate: e.date,
        },
      });
    });
    td7.subscribe(tempusDominus.Namespace.events.change, (e) => {
      td6.updateOptions({
        restrictions: {
          maxDate: e.date,
        },
      });
    });
  })

</script>
</body>
</html>
